<template>
	<view class="cart">
		<!-- main -->
		<view class="mainItem" v-for="(mainItem,index) in cartList" :key="mainItem.id_param">
			<view class="cartItem">
				<view class="isCheck">
					<text @click="changeIsCheck(cartList[index])" class='iconfont icon-xuanzhong' :class="{selected:mainItem.isChecked}"></text>
					<!-- <image class="checkImg" src="../../static/images/check.png"></image> -->
				</view>
			</view>
			<view class="shopItem">
				<image class="checkImg" :src="mainItem.photo"></image>
			</view>
			<view class="titleItem">
				<text class="foodTitle">{{mainItem.subject}}</text>
				<view class="priceAndNum">
					<text class="foodPrice">￥{{mainItem.market_price}}</text>
					<view class="numControl">
						<text class="reduce" @click="changeNum(cartList[index],-1,index)">-</text>
						<text class="inputValue">{{mainItem.num}}</text>
						<!-- <input class="inputValue" type="text" value="1" /> -->
						<text class="add" @click="changeNum(cartList[index],1,index)">+</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- footer -->
		<view class="footer">
			<text @click="isCheckedAll" class='iconfont icon-xuanzhong' :class="{selected:checkedAll}"></text>
			<!-- <image class="footerCheck" src="../../static/images/check.png" mode=""></image> -->
			<text class="allPriceText">合计：</text>
			<text class="allPriceNum">￥{{allMoney}}</text>
			<view class="payShop">去结算({{checkedNum}})</view>
		</view>
	</view>
</template>

<script>
	import { mapGetters } from "vuex"
	export default {
		data() {
			return {
			}
		},
		mounted() {
			// setTimeout(()=>{
			// 	console.log(this.cartList);
			// },2000)
		},
		computed:{
			...mapGetters(['cartList']),
			// 全选
			checkedAll:{
				get(){
					return this.cartList.every(item => item.isChecked)
				},
				set(newValue){
					this.cartList.forEach(item => item.isChecked = newValue)
				}
			},
			// 计算数量
			checkedNum(){
				return this.cartList.reduce((prev,item) => {
					if(item.isChecked){
						prev += 1
					}
					return prev
				},0)
			},
			// 计算总价
			allMoney(){
				return this.cartList.reduce((prev,item) => {
					if(item.isChecked){
						prev += item.market_price * item.num
					}
					return prev
				},0)
			}
		},
		methods: {
			// 商品个数加减和删除
			changeNum(mainItem,disNum,index){
				mainItem.num += disNum
				if(mainItem.num < 1){
					wx.showModal({
						title:'提示',
						content:`你确定要删除${mainItem.subject}ma？`,
						success:(res)=>{
							if(res.confirm){
								this.cartList.splice(index,1)
							}else if (res.cancel){
								mainItem.num = 1
							}
						}
					})
				}
			},
			// 修改单个选中的状态
			changeIsCheck(mainItem){
				// console.log(mainItem);
				mainItem.isChecked = !mainItem.isChecked
			},
			// 全选状态 需要用到set get 当中去修改每个购物车中的选中状态
			isCheckedAll(){
				this.checkedAll = !this.checkedAll
			}
			
		},
		
	}
</script>

<style lang="stylus">
	.cart
		display flex
		flex-direction column
		align-items center
		justify-content space-
		width 100%
		// height 300rpx
		background-color #F4F4F4
		.mainItem
			display flex
			flex-direction row
			align-items center
			width 100%
			height 300rpx
			background-color #FFFFFF
			.cartItem
				display flex
				flex-direction column
				align-items center
				justify-content center
				width 15%
				height 300rpx
				background-color #FFFFFF
				.isCheck
					.iconfont
						color #BAC6CF
						font-size 60rpx
						&.selected
							color #44CE57
			.shopItem
				width 20%
				.checkImg
					width 150rpx
					height 200rpx
			.titleItem
				width 65%
				height 300rpx
				// background-color #4CD964
				margin-left 30rpx
				margin-right 20rpx
				.foodTitle
					display block
					padding-top 40rpx
					font-size 28rpx
					color #333333
				.priceAndNum
					display flex
					flex-direction row
					justify-content space-between
					.foodPrice
						display inline-block
						margin-top 90rpx
						color red
						font-weight 600
					.numControl
						display flex
						flex-direction row
						margin-top 90rpx
						.reduce
							width 60rpx
							text-align center
							height 46rpx
							line-height 40rpx
							border 1rpx solid #333333
							box-sizing border-box
							border-radius 20rpx 0 0 20rpx
						.inputValue
							width 50rpx
							height 46rpx
							text-align center
							border-top 1rpx solid #333333
							border-bottom 1rpx solid #333333
							box-sizing border-box
						.add
							width 60rpx
							text-align center
							height 46rpx
							line-height 40rpx
							border 1rpx solid #333333
							box-sizing border-box
							border-radius 0rpx 20rpx 20rpx 0rpx
		.footer
			display flex
			align-items center
			width 100%
			height 100rpx
			background-color #FFFFFF
			// margin-top 400rpx
			position fixed
			top 92%
			.iconfont
				color #BAC6CF
				font-size 60rpx
				margin 20rpx
				&.selected
					color:  #44CE57
			.allPriceText
				color #808080
			.allPriceNum
				flex 1
				color red
				font-weight 600
			.payShop
				width 200rpx
				height 80rpx
				background-color #B4B4B4
				border-radius 50rpx
				text-align center
				line-height 80rpx
				color #FFFFFF
			
			
</style>
